<template>
	<view class="content">
		<view class="top-content">
			<!-- <image class="canzheng-bgc" src="../../static/images/zhishuo/canzheng-bgc.png"></image> -->
			<customNavbar title="宣传稿件"></customNavbar>
			<view class="top-info">
				<view class="top-big-title">宣传稿件信息</view>
				<view class="canzheng-area-content">
					<view class="canzheng-area">地区 高新四支部</view>
					<view class="canzheng-year">时间 {{timeYear}}年</view>
				</view>
			</view>
			<view class="selectCom">
				<uni-data-select v-model="selectYear" :localdata="rangeYears" @change="change" :clear="false">
				
				</uni-data-select>
			</view>
			
			<view class="canzheng-renshuzongshu">
				<view class="canzheng-zongrenshu">
					<view class="canzhengyizheng-num">{{baoDaoList.hzMap.all || 0}}</view>
					<view class="canzheng-top-title">稿件总数</view>
				</view>
				<view class="canzhneg-pishizongshu">
					<view class="beipishi-num">{{baoDaoList.allCount || 0}}</view>
					<view class="beipishi-top-title">采纳总数</view>
				</view>
			</view>
			<view class="canzheng-list" v-if="this.$common.isEmptyTest(baoDaoList.datas) === false">
			
					<view class="main-content-item" v-for="item in baoDaoList.datas" :key="item.djbh">
						<view class="name">
							<view>{{item.xm}}</view>
							<image @click="toDescribe(item)" class="name-img" src="../../static/images/zhishuo/编组备份.png"></image>
						</view>
						<view class="tian">
							<view>篇数</view>
							<view class="pianshu">{{item.count}}</view>
						</view>
						<view class="score" v-if="hasAdmin">
							<view>得分</view>
							<view class="defen">{{item.score}}</view>
						</view>	
			
					</view>

			
			</view>
			
			<view style="display: flex;justify-content: center;align-items: center;padding-top:40px"  v-if="this.$common.isEmptyTest(baoDaoList.datas) === true">
				<view>
					<image mode="widthFix"  src="../../static/images/zhishuo/quesheng.png"></image>
					<view style="text-align: center;font-weight: bold;">暂无数据</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>


import customNavbar  from '../../components/customNavbar/customNavbar.vue'
import {xcbdDetailHome} from '../../api/index.js'
	
	export default {
		components:{
			customNavbar
		},
		data() {
			return {
				timeYear: '',
				handlerLoading:false,
				selectYear: 3,
				rangeYears: [
				],
				baoDaoList: '',
					hasAdmin: uni.getStorageSync('hasAdmin')
			}
		},
		onShow() {
			this.getXuanChuanScreen()
		},
		onLoad() {
			this.timeYear = this.$store.state.year
				this.rangeYears = this.$store.state.rangeYears
			for (let item of this.rangeYears){
				if (this.timeYear.toString() === item.text.slice(0,-1)){
					this.selectYear = item.value
				}
			}
			
		},
		methods: {
			change(e) {
				for (let item of this.rangeYears){
					if (e === item.value){
						this.timeYear = item.text.slice(0,-1)
					}
				}
				this.getXuanChuanScreen()
			},
			getXuanChuanScreen() {
				this.handlerLoading = true
				xcbdDetailHome({
					year: this.timeYear
				}).then(res => {
					console.log(res);
					if (res.errors.length > 0) {
						uni.showToast({
							title: res.errors,
							icon: 'none',
							duration: 2000,
						});
					} else {
						this.baoDaoList = res
					}
			
				}).catch(err => {
					this.$common.errorToShow(err)
					this.handlerLoading = false;
				})
			},
			
			
			toDescribe(item){
				this.$common.navigateTo('/pages-xuanchuanbaodao/xuanchuanbaodao/xuanchuanbaodao-detail?year='+this.timeYear+ '&detailInfo=' + JSON.stringify(item))
			}
			
		},
	
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-select {
		height: 60rpx;
		border: 0;
		background-color: #ffffff;
	}

	.content{
		height: 100%;
		width: 100%;
		background-color: #F9F9F9;
		.top-content{
			background-image: url('');
			width: 100%;
			height: vw(500);
			background-size: cover;
			.top-info{
					padding: vw(30) vw(0) vw(0) vw(36);
				.top-big-title{
					font-size: 32px;
					font-weight: bold;
					text-align: left;
					color: #ffffff;
				}
				.canzheng-area-content{
					display: flex;
					margin-top: vw(15);
					.canzheng-area{
						font-size: vw(24);
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: Regular;
						text-align: left;
						color: #ffffff;
						margin-right: vw(40);
					
					}
					.canzheng-year{
						font-size: vw(24);
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: Regular;
						text-align: left;
						color: #ffffff;
					}
				}
			}
			.selectCom {
				width: vw(160);
			
				margin: vw(24) vw(0) vw(0) vw(32);
			}
			.canzheng-renshuzongshu{
				width: 100%;
				display: flex;
				justify-content: space-evenly;
				margin-top: vw(30);
				.canzheng-zongrenshu{
					width: vw(332);
					height: vw(160);
					background-size: cover;
					background-image: url('');
					border-radius: vw(16);
					padding: vw(26) vw(0) vw(0) vw(30);

					.canzhengyizheng-num{
						
						font-size: vw(44);
						font-family: DIN Alternate Bold;
						font-weight: Bold;
						text-align: left;
						color: #3771eb;
						margin-bottom: vw(12);
					}
					.canzheng-top-title{
				
						font-size: vw(28);	
						font-weight: Regular;
						text-align: left;
						color: #333333;
					
					}
					
				}
				.canzhneg-pishizongshu{
					width: vw(332);
					height: vw(160);
					background-size: cover;
					background-image: url('');
					border-radius: vw(16);
					padding: vw(26) vw(0) vw(0) vw(30);
					

					.beipishi-num{
						font-size: vw(44);
						font-family: DIN Alternate Bold;
						font-weight: Bold;
						text-align: left;
						color: #3771eb;
						margin-bottom: vw(12);
					}
					.beipishi-top-title{
						font-size: vw(28);
						font-weight: Regular;
						text-align: left;
						color: #333333;
					}
				}
			}
			
			.canzheng-list {
				width: 100%;
				margin-top: vw(20);
				
				.main-content-item {
					width: vw(686);
					height: fit-content;
					background: #ffffff;
					border-radius: vw(16);
					box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.03); 
					margin: 0 auto vw(20);
					padding-bottom: vw(20);
					.name{
						display: flex;
						justify-content: space-between;
						padding: vw(30) vw(20) vw(0) vw(20);			
						font-size: vw(28);
						font-family: PingFang SC, PingFang SC-Semibold;
						font-weight: bold;
						text-align: left;
						color: #333333;
						.name-img{
							width: vw(40);
							height: vw(40);
						}
						
				
					}
					.tian{
						display: flex;
						justify-content: space-between;
						padding: vw(24) vw(20) vw(0) vw(20);						
						font-size: vw(28);
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: Regular;
						text-align: left;
						color: #333333;
						.pianshu{
							color: #333333;
							margin-right: vw(4);
						}
						
					}
					.score{
						display: flex;
						justify-content: space-between;
						padding: vw(24) vw(20) vw(0) vw(20);	
						font-size: vw(28);
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: Regular;
						text-align: left;
						color: #333333;
						.defen{
							color: #333333;
							margin-right: vw(4);
						}
					}
			
				}
			}
		}
	}
</style>
